﻿@model Sealight.Core.DataAdapter.project
@{
    ViewBag.Title = "_AddUpdateProject";
    Layout = "~/Areas/Admin/Views/Shared/__AdminLayout.cshtml";
    string title = string.Empty, description = string.Empty, detail = string.Empty, categoryId = string.Empty, id = string.Empty, image = "/ImageHandler.axd?imageSource=~/Content/images/no-photo-click.png&width=150&height=150";
    bool publish = false;
    if (Model != null)
    {
        id = Model.id.ToString();
        title = Model.title;
        description = Model.description;
        detail = Model.detail;
        if (Model.category != null)
        {
            categoryId = Model.category.id.ToString();
        }
        publish = Model.is_active;

        if (!string.IsNullOrEmpty(Model.image_url))
        {
            image = string.Format("/ImageHandler.axd?imageSource=~/Content/images/projects/{0}&width=150&height=150", Model.image_url);
        }
    }

    var categories = Sealight.UI.WebUI.Services.ProjectService.GetAllCategory();  
}
<script type="text/javascript">
		//<![CDATA[
    // Replace the <textarea id="editor1"> with an CKEditor instance.
    var description_editor, detail_editor;
    $(document).ready(function () {
        if (description_editor)
            description_editor.destroy();
        if (detail_editor)
            detail_editor.destroy();

        description_editor = CKEDITOR.replace('description_field');
        detail_editor = CKEDITOR.replace('detail_field', {
            filebrowserImageBrowseUrl: '/file/Index',
            filebrowserImageUploadUrl: '/file/UploadImageWithCKEditor?folder=editors',
            height: 500,
            filebrowserWindowWidth: '640',
            filebrowserWindowHeight: '480'

        });

        // The instanceReady event is fired when an instance of CKEditor has finished
        // its initialization.
        CKEDITOR.on('instanceReady', function (ev) {
            // Show the editor name and description in the browser status bar.

        });
        //]]>
    });
</script>
<h2>Thêm sửa dự án</h2>
<script type="text/javascript">
    $(document).ready(function () {
        $("a.buttons").button();
        $('#btn_save').click(function () {
            $('#new_edit_form').trigger("submit");
        });
        $('#btn_cancel').click(function () {
            window.location = "/admin/project/index";
        });
        new AjaxUpload('#photo_upload', {
            action: '/file/UploadFile',
            data: { 'folder': 'projects' },
            name: 'file_image',
            responseType: 'true',
            onComplete: function (file, response) {

                if (response != '0') {
                    $("#hidden_image_name").val(response);
                    var img_src = "~/Content/images/projects/" + response;
                    var img_url = GetImageUrl(img_src, 150, 150, true, 100);
                    $("#photo_upload").attr("src", img_url);
                }
                else {

                    ShowErrorMessage('Invalid file extension (jpg|png|jpeg|gif).');
                }

            }
        });

        var container = $('div.container_error');
        ///FORM VALIDATE & SUBMIT
        $.validator.addMethod("selected", function (dropdown, element) {

            return dropdown != "" && dropdown != "none";
        }, "*");
        //form validate & submit
        $("#new_edit_form").validate({
            rules: {
                category_field: {// compound rule 
                    selected: true
                },
                title_field: {// compound rule 
                    required: true
                }
            },
            messages: {
                category_field: {// compound rule 
                    selected: "Vui lòng chọn loại."
                },
                title_field: {
                    required: "Tiêu đề bắt buộc nhập."
                }
            },
            errorElement: "li",
            errorContainer: container,
            errorLabelContainer: $(".error", container)
            ,
            submitHandler: function (form) {
                var id = $('#hidden_id').val();
                var title = $('#title_field').val();

                var oEditorDescription = CKEDITOR.instances.description_field;
                var oEditorDetail = CKEDITOR.instances.detail_field;

                var description = oEditorDescription.getData();
                var detail = oEditorDetail.getData();

                var publish = $('#publish_field').attr('checked');
                var imgUrl = $('#hidden_image_name').val();
                var languageId = '';
                var categoryId = $('#category_field').val();

                JsUtils.ShowLoader('#manage_container', 'Lưu...');
                $.ajax({
                    type: "POST",
                    url: "/Admin/Project/AddOrUpdateProject",
                    data: ({ categoryId: categoryId, languageId: languageId, id: id, title: title, description: HtmlEncode(description),
                        detail: HtmlEncode(detail), publish: publish, imgUrl: imgUrl
                    }),
                    dataType: "json",
                    success: function (d) {
                        if (d != null) {

                            if (d.OperationComplete != null && d.OperationComplete == false && d.ErrorCode != null) {
                                if (d.ErrorFriendlyMessage != null) {
                                    ShowErrorMessage(d.ErrorFriendlyMessage);
                                }
                                return;
                            }
                            else {
                                // ShowErrorMessage("Lưu thành công", "thông báo");
                            }

                            window.location = "/admin/project/index";
                        }
                    },
                    complete: function (d) {
                        JsUtils.hideLoader('#manage_container');
                    },
                    cache: false
                }); //end .ajax call
            }

        }); //end form.validate  

    });    

    function GetImage(imageName) {
        var imageSource;
        if (imageName == null || imageName == undefined || imageName == '') {
            imageSource = "~/Content/images/no-photo.png";
            return GetImageUrl(imageSource, 150, 150, true, 100);
        }
        else {
            imageSource = "~/Content/images/projects/" + imageName;

            return GetImageUrl(imageSource, 150, 150, true, 100);
        }
    }

</script>
<div id="manage_container">
    <div id="new_edit_container">
        <form id="new_edit_form" method="post" action="" enctype="multipart/form-data">
        <fieldset style="width: 700px;" class="Internal">
            <legend class="Internal"></legend>
            <div class="container_error">
                <h5>
                    Vui lòng kiểm tra lại các lỗi...</h5>
                <ol class="error">
                </ol>
            </div>
            <div>            
            <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Loại:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select id="category_field" style="width: 250px;">
                                    <option value="none">-----Chọn loại-----</option>   
                                    
                                    @if (categories != null)
                                    {
                                        foreach (var c in categories)
                                        {
                                            if (categoryId == c.id.ToString())
                                            {
                                             <option value="@c.id" selected>@c.name</option>  
                                            }
                                            else
                                            {
                                            <option value="@c.id">@c.name</option>  
                                            }
                                        }
                                    }                                
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="photoColumn" style="width: 200px;">
                <br />
                <a href="#">
                    <img src="@image"
                        alt="Click lên đây dể tải hình ảnh" id="photo_upload" style="border: solid 1px #d8e2e6;" /></a>
                <input type="hidden" name="hidden_image_name" id="hidden_image_name" />
            </div>
            <div id="infoColumn" style="width: 650px;">
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Tên dự án:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="title_field" name="title_field" style="width: 340px" class="Internal" value="@title"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Mô tả:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="description_field" name="description_field" style="width: 340px" rows="20"
                                    class="Internal">@description</textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Chi tiết:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="detail_field" name="detail_field" style="width: 340px" rows="50" class="Internal">@detail</textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal" style="display: none;">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Từ khóa:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="keyword_field" name="keyword_field" style="width: 340px" class="Internal" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td colspan="2" style="padding-top: 10px;">
                                <input type="checkbox" id="publish_field" name="publish_field" class="Internal"  checked="@(publish ? "checked" : "false")" /><strong
                                    class="Internal">Publish</strong>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <br clear="all" />
            <br />
            <div style="width: 600px; text-align: right; margin-bottom: 10px; float: left;">
                <input type="hidden" id="hidden_id" value="@id" />
                <a href="javascript:void(0);" class="buttons" id="btn_save">Lưu </a><a href="javascript:void(0);"
                    class="buttons" id="btn_cancel">Hủy </a>
            </div>
        </fieldset>
        </form>
    </div>  
</div>